<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>贪吃蛇小游戏</title>
    <style>
        body {
            display: flex;
            flex-direction: column;
            align-items: center;
            background: #E0F7FA;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }
        canvas {
            border: 3px solid #00838F;
            border-radius: 8px;
            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
        }
        #score {
            font-size: 28px;
            color: #006064;
            margin: 20px 0;
        }
    </style>
</head>
<body>
    <div id="score">得分: 0</div>
    <canvas id="gameCanvas" width="400" height="400"></canvas>

    <script>
        const canvas = document.getElementById('gameCanvas');
        const ctx = canvas.getContext('2d');
        const scoreElement = document.getElementById('score');
        
        let snake = [{x: 200, y: 200}];
        let food = {x: 0, y: 0};
        let direction = 'RIGHT';
        let score = 0;

        // 初始化游戏
        function initGame() {
            snake = [{x: 200, y: 200}];
            direction = 'RIGHT';
            score = 0;
            scoreElement.textContent = `得分: ${score}`;
            generateFood();
            drawGame();
        }

        // 生成食物
        function generateFood() {
            food.x = Math.floor(Math.random() * (canvas.width / 10)) * 10;
            food.y = Math.floor(Math.random() * (canvas.height / 10)) * 10;
            snake.some(segment => segment.x === food.x && segment.y === food.y) && generateFood();
        }

        // 游戏主循环
        function drawGame() {
            ctx.clearRect(0, 0, canvas.width, canvas.height);
            
            // 绘制蛇
            snake.forEach((segment, index) => {
                ctx.fillStyle = index === 0 ? '#4CAF50' : '#81C784';
                ctx.fillRect(segment.x, segment.y, 10, 10);
                ctx.strokeStyle = '#2E7D32';
                ctx.strokeRect(segment.x, segment.y, 10, 10);
            });
            
            // 绘制食物
            ctx.fillStyle = '#F44336';
            ctx.fillRect(food.x, food.y, 10, 10);
            
            // 更新蛇头
            const head = {...snake[0]};
            switch (direction) {
                case 'UP':    head.y -= 10; break;
                case 'DOWN':  head.y += 10; break;
                case 'LEFT':  head.x -= 10; break;
                case 'RIGHT': head.x += 10; break;
            }

            // 碰撞检测
            if (head.x < 0 || head.x >= canvas.width || 
                head.y < 0 || head.y >= canvas.height || 
                snake.some(segment => segment.x === head.x && segment.y === head.y)) {
                initGame();
                return;
            }

            // 吃到食物
            if (head.x === food.x && head.y === food.y) {
                score += 10;
                scoreElement.textContent = `得分: ${score}`;
                generateFood();
                snake.unshift(head);
            } else {
                snake.pop();
                snake.unshift(head);
            }

            requestAnimationFrame(drawGame);
        }

        // 键盘控制
        document.addEventListener('keydown', (e) => {
            const keyMap = {
                'ArrowUp': 'UP',    'ArrowDown': 'DOWN',
                'ArrowLeft': 'LEFT','ArrowRight': 'RIGHT'
            };
            const newDirection = keyMap[e.key];
            if (newDirection && 
                !((direction === 'LEFT' && newDirection === 'RIGHT') ||
                  (direction === 'RIGHT' && newDirection === 'LEFT') ||
                  (direction === 'UP' && newDirection === 'DOWN') ||
                  (direction === 'DOWN' && newDirection === 'UP'))) {
                direction = newDirection;
            }
        });

        initGame();
    </script>
</body>
</html>